[ Vue3 ] 筆記 ref、reactive

watch 不會去監管 ref 裡面的 array、object。使用 deep: true 才會去監管 array、object 的變化。vue devtool 也無法接收到 ref 的即時物件值。

const num1 = ref({
    num:1
})
const num2 = reactive({
    num:1
})
setTimeout(()=>{
    num1.value.num = 2
    num2.num = 2
})

watch(num1, ()=>{
    console.log('num1 change')
})
watch(num2, ()=>{
    console.log('num2 change')
})
// num2 change

// -----
watch(num1, ()=>{
    console.log('num1 change')
},{
    deep: true
   })
watch(num2, ()=>{
    console.log('num2 change')
})
// num1 change
// num2 change

reactive 就像是包裝過的 ref。
我們也可以這樣用：

const num1 = ref(1)
const num2 = reactive({
    num:1
})

reactive 解包特性，將 ref 放進 reactive 時，取出不需要 value。
參考官網

const count = ref(1)
const obj = reactive({})

obj.count = count

console.log(obj.count) // 1
console.log(obj.count === count.value) // true

總結